<template>
    <mt-navbar class="top-bar" :fixed="true" v-model="selected">
      <mt-tab-item v-for="(item,index) in navList" :key="index" :id="index">{{item}}</mt-tab-item>
    </mt-navbar>
</template>

<script>
import { Navbar, TabItem } from 'mint-ui'
export default {
  data () {
    return {
      selected: 0
    }
  },
  props: [ 'navList' ],
  watch: {
    selected (e) {
      this.$emit('post', e)
    }
  },
  components: {
    mtNavbar: Navbar,
    mtTabItem: TabItem
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
 .top-bar.mint-navbar { background: #39314a; padding:3px 6px;}
 .top-bar .mint-tab-item-label { color: #fff; font-size: 17px;}
 .top-bar .mint-tab-item.is-selected .mint-tab-item-label { color: #ffbe04;}
 .top-bar.mint-navbar .mint-tab-item.is-selected{ border:none; position: relative;}
 .top-bar.mint-navbar .mint-tab-item.is-selected:after { position: absolute; content: ''; width: 20px; height: 3px; background: #ffbe04; display: block; border-radius: 26%; bottom:10px; left: 50%; margin-left:-10px;}

</style>
